<!DOCTYPE html>
<html>

<head>
  <title>Socket.IO chat</title>
  <meta charset="utf-8" />
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font: 13px Helvetica, Arial;
    }

    form {
      background: #000;
      padding: 3px;
      position: fixed;
      bottom: 0;
      width: 100%;
    }

    form input {
      border: 0;
      padding: 10px;
      width: 90%;
      margin-right: 0.5%;
    }

    form button {
      width: 9%;
      background: rgb(130, 224, 255);
      border: none;
      padding: 10px;
    }

    #messages {
      list-style-type: none;
      margin: 0;
      padding: 0;
    }

    #messages li {
      padding: 5px 10px;
    }

    #messages li:nth-child(odd) {
      background: #eee;
    }
  </style>
</head>

<body>
  <!-- 消息列表 -->
  <ul id="messages"></ul>

  <!-- 发送消息的表单 -->
  <form action="">
    <input id="m" autocomplete="off" /><button>Send</button>
  </form>
  <!-- 引入io的包 -->
  <script src="https://cdn.bootcdn.net/ajax/libs/socket.io/4.1.3/socket.io.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
  <script>
    const scoket = io('http://toutiao.itheima.net', {
      query: {
        token: "725e4b55-d0cd-42fd-85c5-9c09c3ee2110"
      },
      // 通讯协议，默认是http的轮询方案
      transports: ['websocket']
    })
    // 与服务器链接成功，scoketio会触发connect事件，使用on语法注册事件
    scoket.on('connect', function () {
      console.log('链接成功');
      $('#messages').append('<li>链接成功</li>')
    })
    // 发送消息
    $('form').on('submit', (e) => {
      e.preventDefault()
      // 给服务器发送消息，emit触发message事件
      scoket.emit('message', {
        msg: $('#m').val(),
        timestamp: Date.now()
      })
      $('#messages').append(`<li>我说${$('#m').val()}</li>`)
    })

    //服务器响应结果，on监听message事件
    scoket.on('messages', (data) => {
      console.log(data);
      $('#messages').append(`<li>服务器说${data.msg}</li>`)
    })
  </script>
</body>

</html>